<template>
  <div class="flex pad-l-30 mar-t-30">
    <div class="main-transfer border-radius-5 border-all">
      <div class="main-transfer-title border-b v-align-c">
        请选择类目
      </div>
      <div class="pad-l-20 main-transfer-list">
        <div @click="generateData(1)" class="flex pad-5 cursor-p" :class="id===1?'main-transfer-sel':''">
          <div class="flex-item">创意设计</div>
          <div class="pad-r-10">
            <icon class="iconfont icon-arrow-right font-10"></icon>
          </div>
        </div>
        <div @click="generateData(2)" class="flex pad-5 cursor-p" :class="id===2?'main-transfer-sel':''">
          <div class="flex-item">工业设计</div>
          <div class="pad-r-10">
            <icon class="iconfont icon-arrow-right font-10"></icon>
          </div>
        </div>
      </div>
    </div>
    <div class="mar-l-5">
      <el-transfer
          style="text-align: left; display: inline-block"
          v-model="value"
          filterable
          :left-default-checked="[2, 3]"
          :right-default-checked="[1]"
          :titles="['备选项', '已选择']"
          :button-texts="['到左边', '到右边']"
          :format="{
        noChecked: '${total}',
        hasChecked: '${checked}/${total}'
      }"
          @change="handleChange"
          :data="data">
        <el-button class="transfer-footer" slot="left-footer" size="small">操作</el-button>
        <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>
      </el-transfer>
    </div>
  </div>
</template>

<style>
  .main-transfer {
    width: 200px;
  }

  .main-transfer-title {
    background-color: #f5f7fa;
    height: 40px;
    font-size: 16px;
    padding-left: 20px;
  }

  .main-transfer-list {
    height: 260px;
    overflow-y: scroll;
  }

  .main-transfer-sel {
    color: #409eff;
    font-weight: bold;
  }

  .transfer-footer {
    margin-left: 20px;
    padding: 6px 5px;
  }
</style>

<script>
  export default {
    data() {
      return {
        id: 1,
        data: [],
        value: [1, 2]
      }
    },
    created() {
      this.generateData(1)
    },
    methods: {
      handleChange(value, direction, movedKeys) {
        console.log(value, direction, movedKeys)
      },
      generateData(id) {
        // 根据id动态计算data
        let label = ''
        if (id === 1) label = '创意设计'
        if (id === 2) label = '工业设计'
        const data = []
        for (let i = 1; i <= 5; i++) {
          data.push({
            key: i,
            label: label + i
          })
        }
        this.data = data
        this.id = id
      }
    }
  }
</script>